<template>
	<div class="detailContainer" ref="detailContainer">
		<div class="head">fffeliks</div>
		<div class="main">
			<div class="left">
				<img src="@/assets/gitee.png" />
				<img src="@/assets/github.png" />
				<img src="@/assets/home.png" />
			</div>
			<div class="center">
				<slot></slot> <!-- slot 用来包裹其他组件 -->
			</div>
			<div class="right" @click="back">
				<img src="@/assets/close.png" />
			</div>
		</div>
		<div class="foot">
			<div class="f-large-title">
				lorem ipsum dolor sit amet
			</div>
			<div class="f-small-title">lorem lorem</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from "vuex";

const router = useRouter();
const store = useStore();
const detailContainer = ref(null);

const back = () => {
	router.back();
};

onMounted(() => {
	console.log(detailContainer.value);
	console.log(store.state.outerBgColor);
	// const bgColor = store.state.outerBgColor;
	// detailContainer.value.style.backgroundColor = bgColor;
});
</script>

<style scoped lang="scss">
.detailContainer {
	color: #fff;
	box-shadow: 2px 2px 10px #000;
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	user-select: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: all 1s;
	
	.head {
		margin: 10px auto;
		font-size: 1.5rem;
		font-style: italic;
		font-family: fantasy;
		mix-blend-mode: difference;
		z-index: 2;
	}
	
	.main {
		display: flex;
		justify-content: space-between;
		font-size: 3vw;
		
		.left, .right{
			z-index: 2;
		}
		.left {
			margin-left: 10px;
			display: flex;
			flex-direction: column;
			
			img {
				width: 24px;
				height: 24px;
				margin-bottom: 10px;
				cursor: pointer;
			}
		}
		.right {
			margin-right: 10px;
			
			img {
				width: 36px;
				height: 36px;
				cursor: pointer;
			}
		}
		.center{
			position: absolute;
			width: 100vw;
			height: 100vh;
			left: 0;
			top: 0;
			z-index: 1;
		}
	}
	
	.foot {
		text-align: center;
		z-index: 2;
	}
}
</style>
